<template>
  <div id="app">
    <h1>图书管理</h1>
    <el-form ref="form" model="form" inline>
      <el-form-item label="书名">
        <el-input v-model="form.bookname"></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="form.autor"></el-input>
      </el-form-item>
      <el-form-item label="出版社">
        <el-input v-model="form.publisher"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="find">查询</el-button>
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableDate">
      <el-table-column prop="bookname" label="书名"></el-table-column>
      <el-table-column prop="autor" label="作者"></el-table-column>
      <el-table-column prop="publisher" label="出版社"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleEdit(scope.$index, scope, index)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelte(scope.$index, scope, index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="书名" prop="bookname">
          <el-input v-model="ruleForm.bookname"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="autor">
          <el-input v-model="ruleForm.autor"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="publisher">
          <el-input v-model="ruleForm.publisher"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      ruleForm: {},
      rules: {
        bookname: [
          { required: true, message: "请输入图书名字", trigger: "blur" },
        ],
        autor: [{ required: true, message: "请输入作者", trigger: "blur" }],
        publisher: [
          { required: true, message: "请输入出版社", trigger: "blur" },
        ],
      },
      dialogVisible: false,
      form: {},
      tableDate: [
        {
          id: 1,
          bookname: "java编程思想",
          autor: "黑马程序员",
          publisher: "黑马出版社",
        },
        {
          id: 2,
          bookname: "java编程思想",
          autor: "黑马程序员",
          publisher: "黑马出版社",
        },
        {
          id: 3,
          bookname: "java编程思想",
          autor: "黑马程序员",
          publisher: "黑马出版社",
        },
      ],
    };
  },
  methods: {
    handleClose() {},
    find() {
      this.$message.success("查询数据成功");
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelte(index, row) {
      console.log(index, row);
    },
    // axios.getList().then(response{response.date.date}),
    async getList() {
      const response = await axios.get(
        "https://mock.apifox.com/m1/3792071-0-default/api/books"
      );
      this.tableDate = response.data.data;
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valia) => {
        if (valia) {
          await axios.post(
            "https://mock.apifox.com/m1/3792071-0-default/api/books",
            this.ruleForm
          );
          let book = {
            id: Date.now(),
            bookname: this.ruleForm.bookname,
            autor: this.ruleForm.autor,
            publisher: this.ruleForm.publisher,
          };
          this.dialogVisible = false;
          this.$refs["ruleForm"].resetFields();
          this.tableDate.push(book);
          this.$message.success("添加成功");
        } else {
          this.$message.error("校验不成功");
          return false;
        }
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style></style>
